import React from 'react';
import './index.less';
import './hrtable.less';
import RowOpt from './components/RowOperation';
// import TableCell from './components/TableCell';
import { ConfigProvider, Table, Input, Select } from 'antd';
import classnames from 'classnames';
import tableInputCreate from './components/TableInput';
import tableSelectCreate from './components/TableSelect';
import getData from '../../core/getData';

const {Option} = Select;

export default class extends React.PureComponent {
    constructor(props) {
        super(props);
    }

    onRow = (rowData, index) => {
        const eventList = typeof this.props.onRow === 'functions' ? this.props.onRow(rowData, index) : {};

        return {
            ...eventList
        };
    }

    optRender = (text, rowData, index) => {
        const { operation } = this.props;

        return (
            <div className={'last-row-item'}>
                {this._render ? this._render(text, rowData, index) : text}
                <RowOpt rowData={rowData} index={index} operation={operation} />
            </div>
        );
    }

    renderLast = columns => {
        const { operation } = this.props;

        if (!operation) {
            return columns;
        }

        const lastCol = columns[columns.length - 1];

        if (this.optRender === lastCol.render) {
            return columns;
        }
        
        this._render = lastCol.render;

        lastCol.render = this.optRender;

        columns[columns.length - 1] = lastCol;

        return columns;
    }

    renderEdit = columns => {
        const { onChange, modelName, model, onFocus, renderCell } = this.props; 
        const TableSelect = tableSelectCreate(modelName);
        const tableInput = {};
        
        columns.forEach(item => {
            if (item.type && !item.render) {
                if (item.type === 'input') {
                    if (!tableInput[item.dataIndex]) {
                        tableInput[item.dataIndex] = [];
                    }
                    item.render = (text, rowData, index) => {
                        const customRender = renderCell(item, rowData, index);
                        
                        if (customRender) {
                            return customRender;
                        }
                        
                        const key = item.dataIndex;
                        let TableInput = tableInput[key][index];

                        if (!TableInput) {
                            TableInput = tableInput[key][index] = tableInputCreate(modelName, index, key)
                        }

                        return (
                            <TableInput
                                index={index}
                                colKey={key}
                                onChange={onChange(key, index)}
                                key={key + index}
                                onFocus={() => onFocus(key, index)}
                            />
                        );
                    }
                } else if (item.type === 'select') {
                    item.render = (text, rowData, index) => {
                        const customRender = renderCell(item, rowData, index);
                        
                        if (customRender) {
                            return customRender;
                        }

                        let key = item.dataIndex;
                        let options = getData(item, 'params.options') || [];

                        return (
                            <TableSelect
                                index={index}
                                colKey={key}
                                onChange={onChange(key, index)}
                            >
                                {options.map((option, index) => {
                                    return (
                                        <Option
                                            value={option.value}
                                            key={index}
                                        >
                                            {option.label}
                                        </Option>
                                    );
                                })}
                            </TableSelect>
                        );
                    }
                }
            }
        });

        return columns;
    }

    render() {
        let { columns, scrollHeight, status } = this.props;

        if (columns.length > 0) {
            status === 'edit' && (columns = this.renderEdit(columns));
            columns = this.renderLast(columns);
        }

        return (
            <ConfigProvider 
                renderEmpty={() => (<div style={{padding: '30px 0'}}>数据为空</div>)}
            >
                <Table
                    {...this.props} 
                    columns={columns}
                    onRow={this.onRow} 
                    rowClassName={classnames({
                        'row-style': true,
                        'hr-common-table-wrapper': true
                    })}
                    scroll={{ y: scrollHeight || 380 }}     
                />
            </ConfigProvider>
        );
    }
}
